<template>
	<view class="service">
		<view class="service-body" @click="open('bottom')">
			<view class="flex flex-box">
				<text>服务</text>
				<view class="flex flex-y-center flex-box">
					<image class="-image" src="@/static/svg/icon-checked.svg" />
					<view class="px-r-1">快递发货</view>
					<image class="-image" src="@/static/svg/icon-checked.svg" />
					<view class="px-r-1">到店自取</view>
					<image class="-image" src="@/static/svg/icon-checked.svg" />
					<view class="px-r-1">同城配送</view>
				</view>
				<view class="-to flex-middle-center">
					<image class="-image" src="@/static/svg/icon-to.svg" />
				</view>
			</view>
		</view>
		<uni-popup ref="popup">
			<view class="service-popup">
				<view class="flex flex-x-center py-1 f-w">服务</view>
				<view class="flex py-1">
					<image class="custom-icon" src="@/static/svg/icon-songhuoshangmen.svg"></image>
					<view class="px-1">
						<view class="f-w">快递发货</view>
						<view class="">下单后48小时发货，本商品免运费。</view>
					</view>
				</view>
				<view class="flex py-1">
					<image class="custom-icon" src="@/static/svg/icon-daodianziqu.svg"></image>
					<view class="px-1">
						<view class="f-w">到店自提</view>
						<view class="">可选择就近自提点并预约自提时间。</view>
					</view>

				</view>
				<view class="flex py-1">
					<image class="custom-icon daohuohoujiesuan" src="@/static/svg/icon-daohuohoujiesuan.svg"></image>
					<view class="px-1">
						<view class="f-w">收货后结算</view>
						<view class="">
							该店铺交易由星橘联动提供资金村官服务，当符合以下条件时，资金自动结算给商家：卖家确认收货或到达约定的自动确认收货日期。交易资金未经星橘联动存管的情形（储值型，电子卡券等）不在本服务范围内。
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				serviceShow: false
			};
		},
		methods: {
			//
			open(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			//
			close() {
				this.$refs.popup.close()
			},
			//
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
		}
	};
</script>
<style lang="scss" scoped>
	.daohuohoujiesuan {
		width: 200rpx;
	}

	.service {
		font-size: $uni-font-size-base;
		color: $uni-text-color-primary;
		border-radius: 0rpx 0rpx 20rpx 20rpx;

		.service-body {
			display: flex;
			justify-content: space-between;
			background: $uni-bg-color;
			padding: $xj-standard-padding;
			border-bottom-left-radius: $xj-standard-border-radius;
			border-bottom-right-radius: $xj-standard-border-radius;
		}

		.service-popup {
			position: relative;
			height: 660rpx;
			padding: 16rpx 50rpx;
			font-size: $uni-font-size-base;
			color: $uni-text-color-regular;
			z-index: 100;
			background-color: $uni-bg-color;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
		}

		text {
			color: #999;
			margin-right: 10rpx;
		}

		.-image {
			display: inline-block;
			width: 24rpx;
			height: 24rpx;
		}

		.px-r-1 {
			margin-left: 10rpx;
		}
	}
</style>